<template>
  <div class="page-aboutMe">
    <page-cover
      title="🖼️关于我"
      subtitle="手执烟火以谋生,心怀诗意至远方~"
      bg="https://dongping-blog.oss-cn-hangzhou.aliyuncs.com/systemImage/7c9c27e45ba34ca999bf5142415410bd.png"
    ></page-cover>

    <main>
      <div v-if="true" class="introduce">
        <div class="start-text">
          来自远方的朋友,你好呀,相逢何必曾相识,虽然不知道你是谁,但你的到来我定然很高兴🍷🍷
        </div>
        <section class="blogger">
          <div class="title">🍭关于博主</div>
          <div class="content">
            <p v-for="(item, index) in aboutMe" :key="index">
              {{ item }}
              <!-- 吾为潇湘人氏,一介布衣，笔名有余，暂落于星城，苟全于现世，现二十有多矣。吾生不才，混迹江湖多年，无门无派，紧谋得口生计，其一无所成！！！ -->
            </p>
            <!-- <p>
              别无它好，于生活，乐于羽球，健身，厨艺尚可，于技艺，喜于设计，忠于产品，热于技术，且闲时喜好瞎折腾！
            </p>
            <p>
              除却聪智，其余尚可，亦不勤学,望将勤补拙，虽不才，且尚有容人之量，亦有荐人之贤，上可厅堂，下可厨房，外可御敌，内可缝衣，盼终成大器....
            </p> -->
          </div>
        </section>
        <!-- 博主身份证 -->
        <section class="blogger blogger-info">
          <div class="title">📋博主身份证</div>
          <div class="content">
            <p>
              性别 :
              <span>应该是个男的</span>年龄: <span>不到30</span> 生日 :
              <span>这题不会做...</span>
            </p>
            <p>
              星座 : <span>天秤</span>兴趣 : <span>上面说过了</span> 血型 :
              <span>o型</span>
              状态 : <span>活的</span>
            </p>
            <p>随心所欲不逾矩,同流世俗不和污</p>
          </div>
        </section>
        <!-- 娱乐 -->
        <section class="entertainment">
          <div class="title">🥤娱乐</div>
          <div class="content">
            <p>不烟不赌,不游戏,可小酌🍷</p>
            <p>发发呆,打打球,没事到处瞎溜溜🏕️</p>
          </div>
        </section>

        <section class="thisstation">
          <div class="title">🏠关于本站</div>
          <div class="content">
            <p>
              小站所有内容均为记录工作,学习及生活随笔,站内所有内容仅代表个人时下意见和想法!
            </p>
            <p>
              站内引用的文章,均会保留出处,感谢原作者的辛苦写作,如果有异议或侵权,及时联系我处理,谢谢!
            </p>
            <p>如需转载站内的内容,请保留署名以及原文连接,谢谢!</p>
            <p>站内原创文章,版权为站长博主所有,转载请标明出处</p>
            <p>
              站内所用表情包套件来源于百度,仅此个人非商业使用,如有侵权请联系我更换,感谢!
            </p>
            <p>作者才疏学浅,如有不正之处,还望不音指出~</p>
          </div>
        </section>

        <section class="thisstation">
          <div class="title">⛰️技术配置</div>
          <div class="content">
            <p>前端 : uniapp,vue</p>
            <p>
              后端 : node,<a
                target="_blank"
                href="https://effic_team.gitee.io/effic-doc/"
                >effic</a
              >
            </p>
            <p>数据库 : Mysql</p>
            <p>终端 : 小程序,H5,PC</p>
          </div>
        </section>

        <!-- 赞助 -->
        <section class="reward">
          <div class="title">🍟给博主赞助点零食</div>
          <div class="content">
            <div class="qrcodes">
              <div class="qrcode">
                <img
                  src="https://image.dongping.link/imageupload/33d85879b6724c618e66dc2db675cc01.png"
                  alt=""
                />
              </div>
              <div class="qrcode">
                <img
                  src="https://image.dongping.link/imageupload/87b4c91cdb434769aae9c824afbf0e8b.png"
                  alt=""
                />
              </div>
            </div>
          </div>
        </section>

        <section class="thisstation">
          <div class="title">📬联系下博主</div>
          <div class="content">
            <p>Email : 3065975706@qq.com</p>
          </div>
        </section>
      </div>

      <div class="message">
        <div class="head">
          <p>
            <span style="color: #ed686d">理想</span>
            <span style="color: #7c86ee">浪漫</span>
            <span style="color: #74be6e">务实</span>
            <span style="color: #e6b95a">情怀</span>
          </p>
          <p class="text">行路有良友,便是捷径,期待你的留言</p>
        </div>

        <leave-message></leave-message>
      </div>
    </main>

    <footer style="height: 200px"></footer>
  </div>
</template>

<script>
import pageCover from "@/components/page-cover/page-cover";
import leaveMessage from "@/components/leave-message/leave-message";
export default {
  name: "WorkspaceJsonAboutMe",
  components: {
    pageCover,
    leaveMessage,
  },
  data() {
    return {};
  },

  computed: {
    blogger() {
      return this.$store.state.blogger;
    },
    aboutMe() {
      return this.$store.state.systemInfo.aboutMe;
    },
    endContent() {
      let systemInfo = this.$store.state.systemInfo || {};
      return systemInfo.end || {};
    },
  },
  mounted() {},

  methods: {},
};
</script>

<style lang="scss" scoped>
.page-aboutMe {
  height: 100%;
  // overflow-x: hidden;
  cursor: pointer;
}

main {
  max-width: 900px;
  min-height: 800px;
  margin: auto;
  margin-top: -80px;
  position: relative;
  z-index: 9;
  padding: 0 10px;
}

.introduce {
  padding-top: 30px;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.07);
  .start-text {
    max-width: 550px;
    padding: 20px;
    text-align: center;
    margin: 30px auto;
    background: #e1f3d8;
    line-height: 30px;
  }
}

section {
  padding: 0 30px 30px;
  .title {
    font-weight: 600;
    font-size: 20px;
    text-align: center;
    padding: 20px;
  }
}

.blogger {
  p {
    max-width: 600px;
    margin: auto;
    margin-bottom: 10px;
    text-indent: 30px;
    margin-bottom: 10px;
    text-align: justify;
    line-height: 30px;
  }
}

.blogger-info {
  p {
    text-align: center;
    text-indent: 0;
    span {
      color: #607199;
      margin-right: 10px;
    }
  }
}

.entertainment {
  p {
    text-align: center;
    line-height: 30px;
  }
}

.thisstation {
  p {
    margin: auto;
    max-width: 460px;
    margin-bottom: 10px;
    margin-bottom: 10px;
    text-align: center;
    line-height: 30px;
    a {
      color: #2ebc3c;
    }
  }
}

.reward {
  .qrcodes {
    display: flex;
    justify-content: center;
    .qrcode {
      width: 150px;
      height: 150px;
      background: #f5f5f5;
      margin: 20px;
      overflow: hidden;
      border: 2px solid #2ebc3c;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}

// 留言
.message {
  padding: 20px 20px 80px;
  margin-top: 20px;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.07);
  box-sizing: border-box;
  .head {
    text-align: center;
    margin-bottom: 50px;
    p {
      color: #999;
      padding: 10px;
      span {
        margin: 0 10px;
      }
    }
  }
}

@media (max-width: 550px) {
  .message {
    padding: 20px 10px 80px !important;
  }
  main {
    padding: 0 !important;
  }
  section {
    padding: 0 15px 15px !important;
  }
  .qrcodes {
    .qrcode {
      width: 130px !important;
      height: 130px !important;
    }
  }
}
</style>
